<template>
  <div class="rent-add-box">
    <TopTitle :texttitle="'发布房源'"></TopTitle>
    <div class="add-title">房源信息</div>
    <div class="add-NameSearch" @click="goNameSearch">
      <div>小区名称</div>
      <div>{{ arrowname }}<van-icon name="arrow" /></div>
    </div>
    <div class="rent-input add-NameSearch">
      <div class="rent-text">
        租&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金
      </div>
      <input
        v-model.trim="body.price"
        type="text"
        class="rent-search"
        placeholder="请输入租金/月"
      />
      <div class="Company">￥/月</div>
    </div>
    <div class="rent-input add-NameSearch">
      <div class="rent-text">建筑面积</div>
      <input
        v-model.trim="body.size"
        type="text"
        class="rent-search"
        placeholder="请输入建筑面积"
      />
      <div class="Company">㎡</div>
    </div>
    <div class="add-NameSearch">
      <PopupRent
        :title="'户型'"
        @onConfirm="onConfirm"
        :columns="columns"
      ></PopupRent>
    </div>
    <div class="add-NameSearch">
      <PopupRent
        :title="'所在楼层'"
        @onConfirm="onConfirm"
        :columns="columns1"
      ></PopupRent>
    </div>
    <div class="add-PopupRent">
      <PopupRent
        :title="'朝向'"
        @onConfirm="onConfirm"
        :columns="columns2"
      ></PopupRent>
    </div>
    <div class="add-NameSearch">房屋标题</div>
    <input
      type="text"
      name=""
      id=""
      v-model="body.title"
      class="house-title"
      placeholder="请输入标题（例如：整租 小区名 2室 5000元）"
    />
    <div class="add-NameSearch">房屋图像上传</div>
    <van-field name="uploader">
      <template #input>
        <van-uploader v-model="uploader" :after-read="afterRead" />
      </template>
    </van-field>
    <div class="add-NameSearch">房屋配置</div>
    <div class="type-icon">
      <div
        class="icon-items"
        ref="yigui"
        v-activeType
        @click.prevent="supporting('衣柜', 'yigui', $event)"
      >
        <span class="iconfont icon-yigui"></span>
        <span class="text">衣柜</span>
      </div>
      <div
        class="icon-items"
        ref="xiyiji"
        v-activeType
        @click="supporting('洗衣机', 'xiyiji')"
      >
        <span class="iconfont icon-xiyiji"></span>
        <span class="text">洗衣机</span>
      </div>
      <div
        class="icon-items"
        ref="kongdiao"
        v-activeType
        @click="supporting('空调', 'kongdiao')"
      >
        <span class="iconfont icon-kongdiao"></span>
        <span class="text">空调</span>
      </div>
      <div
        class="icon-items"
        ref="meiqitianranqi"
        v-activeType
        @click="supporting('天然气', 'meiqitianranqi')"
      >
        <span class="iconfont icon-meiqitianranqi"></span>
        <span class="text">天然气</span>
      </div>
      <div
        class="icon-items"
        ref="bingxiang"
        v-activeType
        @click="supporting('冰箱', 'bingxiang')"
      >
        <span class="iconfont icon-bingxiang"></span>
        <span class="text">冰箱</span>
      </div>
      <div
        class="icon-items"
        ref="shuinuanqigongcheng"
        v-activeType
        @click="supporting('暖气', 'shuinuanqigongcheng')"
      >
        <span class="iconfont icon-shuinuanqigongcheng"></span>
        <span class="text">暖气</span>
      </div>
      <div
        class="icon-items"
        ref="dianshi"
        v-activeType
        @click="supporting('电视', 'dianshi')"
      >
        <span class="iconfont icon-dianshi"></span>
        <span class="text">电视</span>
      </div>
      <div
        class="icon-items"
        ref="haofangtuo"
        v-activeType
        @click="supporting('热水器', 'haofangtuo')"
      >
        <span class="iconfont icon-haofangtuo400iconfont2reshuiqi"></span>
        <span class="text">热水器</span>
      </div>
      <div
        class="icon-items"
        ref="test"
        v-activeType
        @click="supporting('宽带', 'test')"
      >
        <span class="iconfont icon-icon-test"></span>
        <span class="text">宽带</span>
      </div>
      <div
        class="icon-items"
        ref="shafa"
        v-activeType
        @click="supporting('沙发', 'shafa')"
      >
        <span class="iconfont icon-haofangtuo400iconfont2shafa"></span>
        <span class="text">沙发</span>
      </div>
    </div>
    <div class="interval"></div>
    <div class="add-NameSearch">房屋描述</div>
    <textarea
      name=""
      id=""
      cols="30"
      rows="10"
      class="description"
      v-model="body.description"
      placeholder="请输入房屋描述信息"
    ></textarea>
    <div class="interval-footer"></div>
    <div class="btn-box-add">
      <span class="cancel-btn">取消</span
      ><span class="determine-btn" @click="release">确认</span>
    </div>
  </div>
</template>

<script>
import TopTitle from '@/components/TopTitle.vue'
import PopupRent from '@/components/PopupRent'
import { rentadd, image } from '@/api/Interface'
export default {
  components: {
    TopTitle,
    PopupRent,
  },
  data() {
    return {
      body: {
        title: '',
        description: '',
        houseImg: '',
        oriented: '',
        supporting: [],
        price: '',
        roomType: '',
        size: '',
        floor: '',
        community: '',
      },
      file: '',
      textlabel: '',
      rent: '',
      square: '',
      description: '',
      uploader: [],
      columns: [
        { label: '一室', value: 'ROOM|d4a692e4-a177-37fd' },
        { label: '二室', value: 'ROOM|d1a00384-5801-d5cd' },
        { label: '三室', value: 'ROOM|20903ae0-c7bc-f2e2' },
        { label: '四室', value: 'ROOM|ce2a5daa-811d-2f49' },
        { label: '四室+', value: 'ROOM|2731c38c-5b19-ff7f' },
      ],
      columns1: [
        { label: '高楼层', value: 'FLOOR|1' },
        { label: '中楼层', value: 'FLOOR|2' },
        { label: '低楼层', value: 'FLOOR|3' },
      ],
      columns2: [
        { label: '东', value: 'ORIEN|141b98bf-1ad0-11e3' },
        { label: '西', value: 'ORIEN|103fb3aa-e8b4-de0e' },
        { label: '南', value: 'ORIEN|61e99445-e95e-7f37' },
        { label: '北', value: 'ORIEN|caa6f80b-b764-c2df' },
        { label: '东南', value: 'ORIEN|dfb1b36b-e0d1-0977' },
        { label: '东北', value: 'ORIEN|67ac2205-7e0f-c057' },
        { label: '西南', value: 'ORIEN|2354e89e-3918-9cef' },
        { label: '西北', value: 'ORIEN|80795f1a-e32f-feb9' },
      ],
    }
  },
  methods: {
    // 前往查询页面
    goNameSearch() {
      Dialog.confirm({
        title: '',
        message: '发布成功',
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
      this.$router.push('/nameSearch')
    },
    // 选择类型
    onConfirm(type, value, label) {
      if (type === '所在楼层') {
        this.body.floor = value
      } else if (type === '户型') {
        this.body.roomType = value
      } else if (type === '朝向') {
        this.body.oriented = value
      }
    },
    // 图片上传
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器
      this.body.file = file
    },
    // 选中设施图标
    supporting(type) {
      if (
        this.body.supporting.length == 0 ||
        !this.body.supporting.some((item) => item === type)
      ) {
        this.body.supporting.push(type)
      } else if (this.body.supporting.some((item) => item === type)) {
        this.body.supporting = this.body.supporting.filter(
          (item) => item !== type
        )
      }
    },
    // 发布房源
    async release() {
      this.body.supporting = this.body.supporting.join('|')

      const res = await image(this.body.file)
      this.body.houseImg = res.body[0]
      const datacontent = await rentadd(this.body)
    },
  },
  computed: {
    // 从vuex中获取查询到的小区数据
    arrowname() {
      return this.$store.state.search.searchName === ''
        ? '请输入小区地址'
        : this.$store.state.search.searchName
    },
  },
  created() {
    this.body.community = this.$store.state.search.community
  },

  beforeDestroy() {
    this.$store.commit('search/updata', '')
  },
}
</script>

<style scoped lang="less">
.add-title {
  height: 41.25px;
  line-height: 41.25px;
  font-size: 15px;
  border-bottom: 1px solid #eee;
  color: #21b97a;
}
.add-NameSearch {
  display: flex;
  line-height: 44px;
  font-size: 15px;
  color: #888;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  height: 44px;
  padding: 0 10px;
}
.rent-text {
  width: 85px;
}
.rent-search {
  border: none;
  &::placeholder {
    color: #ccc;
    font-size: 14px;
  }
}
.Company {
  width: 54px;
  text-align: right;
}
.add-PopupRent {
  display: flex;
  line-height: 44px;
  font-size: 15px;
  color: #888;
  // border-bottom: 1px solid #eee;
  justify-content: space-between;
  height: 44px;
  padding: 0 10px;
}
.house-title {
  height: 44px;
  min-width: 90%;
  border: none;
  &::placeholder {
    color: #ccc;
    font-size: 14px;
  }
}
.type-icon {
  width: 100%;
  height: 142px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  .icon-items {
    width: 20%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .iconfont {
      font-size: 23px;
    }
    .text {
      font-size: 16px;
    }
  }
}
.interval {
  height: 20px;
  width: 100%;
  background-color: #f1f1f1;
}
.interval-footer {
  height: 20px;
  width: 100%;
  background-color: #f1f1f1;
  margin-bottom: 45px;
}
.description {
  border: none;
  width: 100%;
  text-indent: 10px;
  &::placeholder {
    color: #ccc;
    font-size: 14px;
  }
}
.btn-box-add {
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 45px;
  width: 100vw;
  display: flex;
  justify-content: center;
  .cancel-btn {
    display: block;
    height: 100%;
    flex: 1;
    text-align: center;
    color: #21b97a;
    line-height: 45px;
    background-color: #fff;
  }
  .determine-btn {
    display: block;
    height: 100%;
    flex: 1;
    text-align: center;
    line-height: 45px;
    background-color: #21b97a;
    color: #fff;
  }
}
.rent-add-box {
  position: relative;
  overflow: hidden;
}
.active {
  color: #21b97a;
}
</style>
